<template>
    <div class="coo-list-wrap">
        <div class="panel flex-column ">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="info-box normal">
                        <div class="title">主库运行状态</div>
                        <div class="content">正常运行</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="info-box normal1">
                        <div class="title">备库运行状态</div>
                        <div class="content">正常运行</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="info-box higher">
                        <div class="title">服务器总数</div>
                        <div class="content">2</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="info-box middle">
                        <div class="title">CPU核心数</div>
                        <div class="content">8</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="info-box lower">
                        <div class="title">内存总量</div>
                        <div class="content">15.28GB</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="info-box highest">
                        <div class="title">复制延迟</div>
                        <div class="content">646ms</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="info-box purple">
                        <div class="title">缓冲池大小</div>
                        <div class="content">128MB</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="info-box orange">
                        <div class="title">连接数</div>
                        <div class="content">30</div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="progress-box" >
                        <div class="title">CPU总使用率</div>
                        <div class="content progress"><el-progress type="dashboard" color="#e6a23c" :percentage="7" width="100" stroke-width=14></el-progress></div>
                        
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="progress-box" >
                        <div class="title">内存总使用率</div>
                        <div class="content progress"><el-progress type="dashboard" color="#5cb87a" :percentage="67" width="100" stroke-width=14></el-progress></div>
                        
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="progress-box" >
                        <div class="title">根分区总使用率</div>
                        <div class="content progress"><el-progress type="dashboard" color="#f56c6c" :percentage="13" width="100" stroke-width=14></el-progress></div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="progress-box" >
                        <div class="title">LOAD负载</div>
                        <div class="content progress"><el-progress type="dashboard" color="#5ba3ec" :percentage="2.71" width="100" stroke-width=14></el-progress></div>
                        
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="progress-box" >
                        <div class="title">可用链接</div>
                        <div class="content progress"><el-progress type="dashboard" color="#e777f9" :percentage="50" width="100" stroke-width=14></el-progress></div>
                        
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="progress-box" >
                        <div class="title">可用表缓存</div>
                        <div class="content progress"><el-progress type="dashboard" color="#8fe0c6" :percentage="89" width="100" stroke-width=14></el-progress></div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24"  style="margin-top:20px">
                <el-col :span="12">
                    <div class="graph ">
                        <div class="title">QPS</div>
                        <div ref="inquireRef" class="ammo-content"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="graph ">
                        <div class="title">事物响应时间（ms）</div>
                        <div ref="objectRef" class="ammo-content"></div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24"  style="margin-top:20px">
                <el-col :span="12">
                    <div class="graph">
                        <div class="title">CPU使用率（%）</div>
                        <div ref="cpuRef" class="ammo-content"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="graph ">
                        <div class="title">内存使用率（%）</div>
                        <div ref="storeRef" class="ammo-content"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import PaginationControl from "@/layout/paginationControl.vue"
  
export default {
    components: {
        PaginationControl,
    },
    data: function() {
        return {
            queryParams: {
            },
            typeList: {
                10: "all",
                20: "主机1",
                30: "主机2",
            },
            pieData: [
                {
                    value: 153,
                    name: "高风险",
                },
                {
                    value: 142,
                    name: "较高风险",
                },
                {
                    value: 495,
                    name: "中风险",
                },
                {
                    value: 148,
                    name: "低风险",
                },
                {
                    value: 2935,
                    name: "较低风险",
                },
            ],
            
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            this.getCPU();
            this.getStore();
            this.getInquire();
            this.getObject();
        },
        getStore() {
            const xAxis = ["10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49",]
            const data = [72.6,72.9,73.5,73.6,73.3,73.5,73.3,73.8,73.72,73.73,74.5,73.9,72.5,72.1,73.9,73.6,73.7,72.8,72.5,73.4,73.1,73.6,73.4,73.3,72.5,72.3,72.3,72.5,73.7,72.2,73.4,73.2,73.6,73.7,73.6,73.1,73.2,73.3,73.7,73.1,72.1,72.4,72.9,72.8,73.7,72.3,72.1,73.7,72.5,72.0]
            this.initStore(xAxis, data);
        },
        getCPU() {
            const xAxis = ["10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49",]
            const data = [11.6,12.9,13.5,8.6,7.3,8.5,7.3,6.8,9.2,13.0,24.5,13.9,11.5,11.1,25.9,20.6,13.7,12.8,8.5,9.4,7.1,10.6,8.4,9.3,8.5,7.3,8.3,12.5,10.7,8.2,4.4,7.2,10.6,10.7,6.6,9.1,9.2,11.3,10.7,13.1,11.1,6.4,6.9,8.8,7.7,8.3,11.1,5.7,5.5,6.0]
            this.initCPU(xAxis, data);
        },
        getInquire() {
            const xAxis = ["10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49",]
            const data = [172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73,172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73,172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73,172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73,172.6,168.9,173.5,373.6,73.3,73.5,73.3,73.8,73.72,173.73]
            this.initInquire(xAxis, data);
        },
        getObject() {
            const xAxis = ["10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49",]
            const data = [49,32,10,98,94,97,87,68,43,49,49,32,10,98,94,97,87,68,43,49,49,32,10,98,94,97,87,68,43,49,49,32,10,98,94,97,87,68,43,49,49,32,10,98,94,97,87,68,43,49]
            this.initObject(xAxis, data);
        },
        initInquire(xAxis, data) {
            //显示折线图
            console.log(xAxis)
            console.log(data)
            const myChart = echarts.init(this.$refs.inquireRef);
            myChart.setOption({
                xAxis: {
                    type: "category",
                    data: xAxis,
                    boundaryGap: false,
                },
                yAxis: {
                    // name: '保单数（单）', //纵坐标名称
                    type: 'value'
                },
                grid: {
                    top: 40,
                    left: 20,
                    right: 10,
                    bottom: 0,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                series: [{
                    data: data,
                    type: "line",
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: "#F56C6C"},
                                {offset: 0.5, color: "rgb(231, 186, 186)"},
                                {offset: 1, color: "rgb(218, 194, 194)"}
                            ],
                        },
                        width: 1.5,
                    },
                    smooth: false,
                    symbol: "none" , // 每个点的形状
                    // symbolSize: 5,
                    color:"#F56C6C",
                }]
            });
            console.log(myChart)
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        initObject(xAxis, data) {
            //显示折线图
            console.log(xAxis)
            console.log(data)
            const myChart = echarts.init(this.$refs.objectRef);
            myChart.setOption({
                xAxis: {
                    type: "category",
                    data: xAxis,
                    boundaryGap: false,
                },
                yAxis: {
                    // name: '保单数（单）', //纵坐标名称
                    type: 'value'
                },
                grid: {
                    top: 40,
                    left: 20,
                    right: 10,
                    bottom: 0,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                series: [{
                    data: data,
                    type: "line",
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: "#409EFF"},
                                {offset: 0.5, color: "rgb(121, 187, 255)"},
                                {offset: 1, color: "rgb(198, 226, 225)"}
                            ],
                        },
                        width: 1.5,
                    },
                    smooth: false,
                    symbol: "none" , // 每个点的形状
                    // symbolSize: 5,
                    color:"#409EFF",
                }]
            });
            console.log(myChart)
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        initStore(xAxis, data) {
            //显示折线图
            console.log(xAxis)
            console.log(data)
            const myChart = echarts.init(this.$refs.storeRef);
            myChart.setOption({
                xAxis: {
                    type: "category",
                    data: xAxis,
                    boundaryGap: false,
                },
                yAxis: {
                    // name: '保单数（单）', //纵坐标名称
                    type: 'value'
                },
                grid: {
                    top: 40,
                    left: 20,
                    right: 10,
                    bottom: 0,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                series: [{
                    data: data,
                    type: "line",
                    lineStyle: {
                        color: "rgb(77,195,21)",
                        width: 1,
                    },
                    areaStyle: {
                        color: "rgb(237,249,232)"
                    },
                    smooth: false,
                    symbol: "none" , // 每个点的形状
                    // symbolSize: 5,
                    color:"rgb(77,195,21)",
                }]
            });
            console.log(myChart)
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
        initCPU(xAxis, data) {
            //显示折线图
            console.log(xAxis)
            console.log(data)
            const myChart = echarts.init(this.$refs.cpuRef);
            myChart.setOption({
                xAxis: {
                    type: "category",
                    data: xAxis,
                    boundaryGap: false,
                },
                yAxis: {
                    // name: '保单数（单）', //纵坐标名称
                    type: 'value'
                },
                grid: {
                    top: 40,
                    left: 20,
                    right: 10,
                    bottom: 0,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                series: [{
                    data: data,
                    type: "line",
                    lineStyle: {
                        color: "rgb(249,169,6)",
                        width: 1,
                    },
                    areaStyle: {
                        color: "rgb(253,248,235)"
                    },
                    smooth: false,
                    symbol: "none" , // 每个点的形状
                    // symbolSize: 5,
                    color:"rgb(249,169,6)",
                }]
            });
            console.log(myChart)
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        },
    },
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/scrollbar.css";
.coo-list-wrap {
	height: 100%;
	width: 100%;
    position: relative;
	.status {
		color: #c0ccda;
		margin-right: 8px;
		&.active {
			color: #13ce66;
		}
	}
    .table-container {
        position: absolute;
        left: 0;
        right: 0;
        top: 180px;
        bottom: 0;
        // margin-bottom: 20px;
        .el-table {
            font-size: 12px !important;
        }
    }
	.panel {
		box-shadow: 0 0 5px #ebe7e7;
		background-color: #fff;
		padding: 20px;
	}
}
.info-box {
    // border: 1px solid #bdc2c8;
    border-radius: 5px;
    height: 100px;
    // margin-top: 15px;
    .title {
        color: #606266;
        margin-left: 30px;
        font-size: 15px;
        padding-top: 20px;
    }
    .content {
        font-weight: 600;
        margin-left: 30px;
        font-size: 24px;
        padding: 15px 0 10px 0;
    }
    .progress {
        padding: 5px 0 10px 0;
    }
}
.progress-box {
    border: 1px solid rgb(230, 227, 227);
    border-radius: 5px;
    height: 160px;
    margin-top: 20px;
    .title {
        display: flex;
        justify-content: center;
        color: #606266;
        font-size: 16px;
        padding: 20px 0 10px 0;
    }
    .content {
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
        font-size: 28px;
        font-weight: 800;
        padding: 25px 0 10px 0;
    }
    .progress {
        padding: 5px 0 10px 0;
    }
}
.highest {
    background: rgb(254, 236, 238);
    .content {
        color: rgb(253, 61, 83);
    }
}
.higher {
    background: rgb(254,245,245);
    // background: rgb(231, 186, 186);
    .content {
        color: rgb(224, 127, 128);
    }
}
.middle {
    background: rgb(255,246,231);
    .content {
        color: rgb(249,169,6);
    }
}
.lower {
    background: rgb(236,245,255);
    .content {
        color: #409EFF;
    }
}
.normal1 {
    background: rgb(237,249,232);
    .content {
        color: rgb(77,195,21);
    }
}
.normal {
    background: rgb(221,247,241);
    .content {
        color: rgb(47,213,181);
    }
}
.purple {
    background: rgb(242,232,247);
    .content {
        color: rgb(189,142,211);
    }
}
.orange {
    background: rgb(251,235,220);
    .content {
        color: rgb(235,151,78);
    }
}
.el-button {
    border-radius: 16px;
    font-size: 12px;
    padding: 9px 15px;
    &.el-button--primary.is-plain{
        color: #409EFF;
        background: #E9F2FF;
        border: 1px solid #C4E1FF;
    }
    &.el-button--danger.is-plain{
        color: #FF9D9D;
        background: #FDEEEE;
        border: 1px solid #FFD4D4;
    }
}
.graph {
    border: 1px solid rgb(230, 227, 227);
    border-radius: 5px;
    .title {
        display: flex;
        justify-content: center;
        color: #606266;
        font-size: 16px;
        padding: 20px 0 10px 0;
    }
    .ammo-content {
        height: 198px;
        width: 94%;
        margin: -20px 10px 20px 10px;
    }
}
</style>